﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
    ViewBag.ChainName = ViewBag.EntityID + ViewBag.ChainSoFar.Replace(";", "").Replace(".", "");
    string crudServiceBaseUrl = ViewBag.Server + "/api/";
    string RafikiMasterVM = System.Configuration.ConfigurationManager.AppSettings["RafikiMasterVM"];
    ViewBag.td = "CURRENT.Term";
}

<style>
    .relations {
        position: relative;
        width: 98%;
        margin-left: 2%;
    }
</style>
@* Template Code for both above sections:*@
<script type="text/x-kendo-tmpl" id="entity-template-@(ViewBag.VMName)">
    @foreach (var item in ViewBag.AttList)
    {
        <li>@item.AttributeName: <span>#:@item.AttributeName#</span></li>
    }
</script>


<div id="BINDDIV-@(ViewBag.VMName)">
    @* If there are NO Related Entities, then just render the details here: *@
    <ul id="simple-@(ViewBag.VMName)" class="relations"
        data-role="listview"
        data-template="entity-template-@(ViewBag.VMName)"
        data-bind="source: entityDataSource"></ul>

    <div id="complex-@(ViewBag.VMName)" class="tabs">

        @*The following displays the Attributes of the Entity in a collapsable panel*@
        <div class="tab">
            <input class="tab-radio" type="radio" id="Details-@(ViewBag.VMName)" name="Tab-Group-@(ViewBag.VMName)" />
            <label class="tab-label" for="Details-@(ViewBag.VMName)">Details about <span data-bind="text: EntityName" /></label>

            <div class="tab-panel">
                <div class="tab-content" id="detail-tab-@(ViewBag.VMName)">
                    @* Move the simple detail code here if tabs are needed. *@
                </div>
            </div>
        </div>


        @* The rest of the Tabs of relationships: *@

        <div id="#reltabs-@(ViewBag.VMName)"
             data-template="template-@(ViewBag.VMName)"
             data-bind="source: entityRelationshipDataSource"></div>
        <p>&nbsp;</p>

        <script type="text/x-kendo-tmpl" id="template-@(ViewBag.VMName)">
            <div class="tab inner">
                <input class="tab-radio" type="radio" id="${items[0].PanelID()}-Tab" name="Tab-Group-@(ViewBag.VMName)"
                       data-itemcount="${items.length}" data-divzero="${items[0].DivName()}-radio" />
                <label class="tab-label" for="${items[0].PanelID()}-Tab">${items[0].DisplayFunctionName}</label>

                <div class="tab-panel">
                    <div class="tab-content">
                        <div class="relations panels" id="${items[0].PanelID()}-Panel">
                            # for (i=0; i < items.length; i++) {
                            #
                            <div class="tab">
                                <input class="tab-radio" type="radio" id="${items[i].DivName()}-radio"
                                       name="Tab-Group-@(ViewBag.VMName)-${items[0].PanelID()}"
                                       data-DivName="${items[i].DivName()}" data-LoadName="${items[i].LoadName()}" />
                                <label class="tab-label" for="${items[i].DivName()}-radio">${items[i].Entity2Name}</label>
                                <div class="tab-panel">
                                    <div class="tab-content" id="${items[i].DivName()}">
                                    </div>
                                </div>
                            </div>
                            #
                            }
                            #
                        </div>
                    </div>
                </div>
            </div>
        </script>

    </div>
</div>
<script>
    @*
        For Each Entity, create a uniquely named Kendo Observable (ViewModel)
        Set Some general values:
        EntityID
        EntityName
        Set some calculated values:
        DivName - Name of Div to load up the next level of ShowEntity
    *@
                    @(ViewBag.VMName) = kendo.observable({
                        EntityID: "@(ViewBag.EntityID)",
                        EntityName: '',
                        IsRendered: "false",
                        entityDataSource:  new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: '',
                                    dataType: "json"
                                },
                                update: {
                                    url: "",
                                    dataType: "json",
                                    type: "put"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                },
                                batch: true
                            },

                            requestEnd: function(e) {

                                setTimeout(function () {
                                    if(@(ViewBag.VMName).entityRelationshipDataSource.transport.options.read.url == "") {
                                        @(ViewBag.VMName).entityRelationshipDataSource.transport.options.read.url = "@crudServiceBaseUrl" + "readnew/" + "@(ViewBag.ChainSoFar)" + "/relatedentities?TD=@(ViewBag.td)";
                                        @(ViewBag.VMName).entityRelationshipDataSource.fetch();
                                    }
                                })
                            },
                            schema: {
                                model: {
                                    id: "EntityID"
                                }
                            }
                        }),
                        entityRelationshipDataSource: new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: '',
                                    dataType: "json"
                                }
                            },
                            requestEnd: function (e) {
                                setTimeout(function () {
                                    mergeandsizetabs("complex-@(ViewBag.VMName)");                                 
                                    setuptabs("complex-@(ViewBag.VMName)");
                                });
                            },
                            change: function (e) {
                                if (@(ViewBag.VMName).entityRelationshipDataSource.total()>0)
                                {
                                    // If there are RELATED entities, then show details as one more tab by moving the simple detail list appropriately.
                                    $("#detail-tab-@(ViewBag.VMName)").append($("#simple-@(ViewBag.VMName)"));
                                    $("#simple-@(ViewBag.VMName)").show();
                                    $("#complex-@(ViewBag.VMName)").show();
                                }
                                else {
                                    // If there are no related entities, just show the details
                                    $("#simple-@(ViewBag.VMName)").show();
                                }
                            },
                            schema: {
                                model: {
                                    id: "EntityID",
                                    fields: {
                                        ShortFunctionName: {editable: false}
                                    },
                                    SRNameDirTrimmed: function() {
                                        return this.get("SRNameWithDir").replace(".","");
                                    },
                                    //This is the name of the DIV which will contain the next SHOWEntity
                                    DivName: function() {
                                        return "subdiv@(ViewBag.VMName)"+this.SRNameDirTrimmed()+this.Entity2ID;
                                    },
                                    // This is the command to load the NEXT Function (usually ShowEntity)
                                    LoadName: function() {
                                        if (this.FunctionCommand=="HOME/ShowEntity") {
                                            var buttonstr = this.FunctionCommand+"?entityid="+this.Entity2ID +
                                            "&ChainSoFar=@(ViewBag.ChainSoFar)"+this.SRNameWithDir+";"+this.Entity2ID+";"+
                                            "&EntityType="+this.Entity2Type+"&TD=@(ViewBag.td)"+
                                                "&CallingFunction="+this.ShortFunctionName;

                                        } else
                                            if (this.FunctionCommand=="HOME/ShowView")
                                            {
                                                var jsondata = '{"@@'+this.E1LinkName+'":"'+this.Entity1ID+'","@@'+this.E2LinkName+'":"'+this.Entity2ID+'"}';
                                                var buttonstr = this.FunctionCommand+"?FunctionName="+this.ShortFunctionName+
                                                    '&TD=@(ViewBag.td)&JSONPARAMETERS='+jsondata
                                                "&CallingFunction="+this.ShortFunctionName;
                                            }
                                            else
                                                if (this.FunctionCommand=="HOME/ShowURL") {
                                                    var buttonstr = this.FunctionCommand+"?EntityID="+this.Entity2ID;
                                                }
                                                else
                                                    if (this.FunctionCommand=="HOME/Search") {
                                                        var buttonstr = this.FunctionCommand;
                                                    }
                                        return buttonstr;
                                    },
                                    PanelID: function() {
                                        return this.get("ShortFunctionName").replace(" ","")+"-@(ViewBag.VMName)";
                                    }
                                }
                            },
                            group: { field: "ShortFunctionName" }
                        })

                    });
    kendo.bind($("#BINDDIV-@(ViewBag.VMName)"),@(ViewBag.VMName));
    // Polyfill for IE
    PointerEventsPolyfill.initialize({});
    $("#complex-@(ViewBag.VMName)").hide();
    $("#simple-@(ViewBag.VMName)").hide();
    @(ViewBag.VMName).entityDataSource.transport.options.read.url = "@crudServiceBaseUrl"
            + 'readnew/' + "@(ViewBag.EntityTypeSubType.Replace('.',';'))" + '?Filter=EntityID="@(ViewBag.EntityID)"';
    @(ViewBag.VMName).entityDataSource.fetch(function() {

        var data = @(ViewBag.VMName).entityDataSource.at(0);
        @(ViewBag.VMName).set("EntityName",data.EntityName);
    });




</script>

